<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<%@include file="/WEB-INF/include_head.jsp" %>
<link rel="stylesheet" href="/ztree/zTreeStyle.css"/>
<script type="text/javascript" src="/layer/layer.js" charset="UTF-8"></script>
<script type="text/javascript" src="/ztree/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="/nhcf/menu.js"></script>
<script type="text/javascript">
    $(function () {
        // 调用树形结构生成函数
        generateTree();
        // 给添加子节点按钮绑定单击响应函数
        $("#treeDemo").on("click", ".addBtn", function () {
            // 将当前节点的 id， 作为新节点的 pid 保存到全局变量
            window.pid = this.id;
            // 打开模态框
            $("#menuAddModal").modal("show");
            return false;
        })
        $("#menuSaveBtn").click(function () {
            // 收集表单项中用户输入的数据
            let name = $.trim($("#menuAddModal [name=name]").val());
            let url = $.trim($("#menuAddModal [name=url]").val());
            // 单选按钮要定位到“被选中” 的那一个
            let icon = $("#menuAddModal [name=icon]:checked").val();
            // 发送 Ajax 请求
            $.ajax({
                url: "menu/do/save.json",
                type: "post",
                data: {
                    pid: window.pid,
                    name: name,
                    url: url,
                    icon: icon
                },
                dataType: "json",
                success: function (response) {
                    let result = response.result;
                    if (result == "SUCCESS") {
                        layer.msg("操作成功！ ");
                        generateTree();
                    }
                    if (result == "FAILURE") {
                        layer.msg("操作失败！ " + response.message);
                    }
                },
                error: function (response) {
                    layer.msg(response.status + " " + response.statusText);
                }
            })
            // 关闭模态框
            $("#menuAddModal").modal("hide");
            // 清空表单
            // jQuery 对象调用 click()函数， 里面不传任何参数， 相当于用户点击了一下
            $("#menuResetBtn").click();
        })
        // 给编辑按钮绑定单击响应函数
        $("#treeDemo").on("click", ".editBtn", function () {
            // 将当前节点的 id 保存到全局变量
            window.id = this.id;
            // 打开模态框
            $("#menuEditModal").modal("show");
            // 获取 zTreeObj 对象
            let zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
            // 根据 id 属性查询节点对象
            // 用来搜索节点的属性名
            let key = "id";
            // 用来搜索节点的属性值
            let value = window.id;
            let currentNode = zTreeObj.getNodeByParam(key, value);
            // 回显表单数据
            $("#menuEditModal [name=name]").val(currentNode.name);
            $("#menuEditModal [name=url]").val(currentNode.url);
            $("#menuEditModal [name=icon]").val([currentNode.icon]);
            return false;
        })
        // 给更新模态框中的更新按钮绑定单击响应函数
        $("#menuEditBtn").click(function(){
            // 收集表单数据
            let name = $("#menuEditModal [name=name]").val();
            let url = $("#menuEditModal [name=url]").val();
            let icon = $("#menuEditModal [name=icon]:checked").val();
            // 发送 Ajax 请求
            $.ajax({
                url:"menu/do/update.json",
                type:"post",
                data:{
                    id: window.id,
                    name:name,
                    url:url,
                    icon:icon
                },
                dataType:"json",
                success:function(response){
                    let result = response.result;
                    if(result == "SUCCESS") {layer.msg("操作成功！ ");
                        // 重新加载树形结构
                        generateTree();
                    } if
                    (result == "FAILED") {
                        layer.msg("操作失败！ "+response.message);
                    }
                },
                error:function(response){
                    layer.msg(response.status+" "+response.statusText);
                }
            })
            // 关闭模态框
            $("#menuEditModal").modal("hide");
        })
        // 给“× ” 按钮绑定单击响应函数
        $("#treeDemo").on("click",".removeBtn",function(){
            // 将当前节点的 id 保存到全局变量
            window.id = this.id;
            // 打开模态框
            $("#menuDeleteModal").modal("show");
            // 获取 zTreeObj 对象
            let zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
            // 根据 id 属性查询节点对象
            let key = "id";
            let value = window.id;
            let currentNode = zTreeObj.getNodeByParam(key, value);
            $("#removeNodeSpan").html(" 【 <i class='"+currentNode.icon+"'></i>"+currentNode.name+"】 ");
            return false;
        })
        $("#confirmBtn").click(function() {
            $.ajax({
                url: "menu/do/delete.json",
                type: "post",
                data: {
                    id: window.id
                },
                dataType: "json",
                success: function (response) {
                    let result = response.result;
                    if (result == "SUCCESS") {
                        layer.msg("操作成功！ ");
                        // 重新加载树形结构
                        generateTree();
                    }
                    if
                    (result == "FAILED") {
                        layer.msg("操作失败！ " + response.message);
                    }
                },
                error: function (response) {
                    layer.msg(response.status + " " + response.statusText);
                }
            })
            // 关闭模态框
            $("#menuDeleteModal").modal("hide");
        })
    })
</script>
<body>
<%@include file="/WEB-INF/include_nav.jsp" %>
<div class="container-fluid">
    <div class="row">
        <%@include file="/WEB-INF/include_sidebar.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading"><i class="glyphicon glyphicon-th-list"></i> 权限菜单列表
                    <div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal"><i
                            class="glyphicon glyphicon-question-sign"></i></div>
                </div>
                <div class="panel-body">
                    <ul id="treeDemo" class="ztree">
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<%@include file="/WEB-INF/modal/menu/modal_menu_add.jsp" %>
<%@include file="/WEB-INF/modal/menu/modal_menu_edit.jsp" %>
<%@include file="/WEB-INF/modal/menu/modal_menu_delete.jsp" %>
</body>
</html>